<template xmlns:background-color="http://www.w3.org/1999/xhtml">
  <a-row :gutter="10" class="department">
    <a-col :md="leftColMd" :sm="24" class="bor_radius">
      <a-card :bordered="false">
        <!-- 按钮操作区域 -->
        <a-row style="margin-left: 14px; text-align: right">
          <a-button @click="handleAdd(1)" type="primary">添加部门</a-button>
          <a-button @click="handleAdd(2)" type="primary">添加下级</a-button>
          <a-button
            type="primary"
            icon="download"
            @click="handleExportXls('部门信息')"
            >导出</a-button
          >
          <!--  :headers="tokenHeader" -->
          <a-upload
            name="file"
            :showUploadList="false"
            :multiple="false"
            :action="importExcelUrl"
            :headers="tokenHeader"
            @change="handleImportExcel"
          >
            <a-button type="primary" icon="import">导入</a-button>
          </a-upload>
          <a-button title="删除多条数据" @click="batchDel" type="default"
            >批量删除</a-button
          >
          <!--<a-button @click="refresh" type="default" icon="reload" :loading="loading">刷新</a-button>-->
        </a-row>
        <div
          style="
            background: #fff;
            padding-left: 16px;
            height: 100%;
            margin-top: 5px;
          "
        >
          <a-alert type="info" :showIcon="true">
            <div slot="message">
              当前选择：
              <span v-if="this.currSelected.title">{{
                getCurrSelectedTitle()
              }}</span>
              <a
                v-if="this.currSelected.title"
                style="margin-left: 10px"
                @click="onClearSelected"
                >取消选择</a
              >
            </div>
          </a-alert>
          <a-input-search
            @search="onSearch"
            style="width: 100%; margin-top: 10px"
            placeholder="请输入部门名称"
          />
          <!-- 树-->
          <a-col :md="10" :sm="24">
            <template>
              <a-dropdown
                :trigger="[this.dropTrigger]"
                @visibleChange="dropStatus"
              >
                <span style="user-select: none; text-align: left">
                  <a-tree
                    checkable
                    multiple
                    @select="onSelect"
                    @check="onCheck"
                    @rightClick="rightHandle"
                    :selectedKeys="selectedKeys"
                    :checkedKeys="checkedKeys"
                    :treeData="departTree"
                    :checkStrictly="checkStrictly"
                    :expandedKeys="iExpandedKeys"
                    :autoExpandParent="autoExpandParent"
                    @expand="onExpand"
                  />
                </span>
                <!--新增右键点击事件,和增加添加和删除功能-->
                <a-menu slot="overlay">
                  <a-menu-item @click="handleAdd(3)" key="1">添加</a-menu-item>
                  <a-menu-item @click="handleDelete" key="2">删除</a-menu-item>
                  <a-menu-item @click="closeDrop" key="3">取消</a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>
          </a-col>
        </div>
      </a-card>
      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
      <div class="drawer-bootom-button_depart">
        <a-dropdown :trigger="['click']" placement="topCenter">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="switchCheckStrictly(1)"
              >父子关联</a-menu-item
            >
            <a-menu-item key="2" @click="switchCheckStrictly(2)"
              >取消关联</a-menu-item
            >
            <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
            <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
            <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
            <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
          </a-menu>
          <a-button>
            树操作
            <a-icon type="up" />
          </a-button>
        </a-dropdown>
      </div>
      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
    </a-col>
    <a-col
      :md="rightColMd"
      :sm="24"
      class="bor_radius"
      v-show="this.rightcolval == 1"
    >
      <a-card :bordered="false">
        <div style="text-align: right">
          <a-icon type="close-circle" @click="hideRightColMd" />
        </div>
        <a-tabs defaultActiveKey="1" class="tab_box">
          <a-tab-pane tab="基本信息" key="1">
            <a-card :bordered="false" v-if="selectedKeys.length > 0">
              <a-form-model ref="form" :model="model" :rules="validatorRules">
                <a-form-model-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="departName"
                  label="机构名称"
                >
                  <a-input
                    placeholder="请输入机构/部门名称"
                    v-model="model.departName"
                  />
                </a-form-model-item>
                <a-form-model-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="上级部门"
                >
                  <a-tree-select
                    style="width: 100%"
                    :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
                    :treeData="treeData"
                    :disabled="disable"
                    v-model="model.parentId"
                    placeholder="无"
                  ></a-tree-select>
                </a-form-model-item>
                <a-form-model-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="orgCode"
                  label="机构编码"
                >
                  <a-input
                    disabled
                    placeholder="请输入机构编码"
                    v-model="model.orgCode"
                  />
                </a-form-model-item>
                <a-form-model-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="orgCategory"
                  label="机构类型"
                >
                  <template v-if="orgCategoryDisabled">
                    <a-radio-group
                      v-model="model.orgCategory"
                      placeholder="请选择机构类型"
                    >
                      <a-radio value="1">公司</a-radio>
                    </a-radio-group>
                  </template>
                  <template v-else>
                    <a-radio-group
                      v-model="model.orgCategory"
                      placeholder="请选择机构类型"
                    >
                      <a-radio value="2">部门</a-radio>
                      <a-radio value="3">岗位</a-radio>
                    </a-radio-group>
                  </template>
                </a-form-model-item>
                <a-form-model-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="部门人员"
                >
                  <j-select-multi-user
                    v-model="model.directorUserIds"
                    valueKey="id"
                  ></j-select-multi-user>
                </a-form-model-item>
                <a-form-model-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="排序"
                >
                  <a-input-number v-model="model.departOrder" />
                </a-form-model-item>
                <a-form-model-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="手机号"
                  prop="mobile"
                >
                  <a-input placeholder="请输入手机号" v-model="model.mobile" />
                </a-form-model-item>
                <a-form-model-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="地址"
                >
                  <a-input placeholder="请输入地址" v-model="model.address" />
                </a-form-model-item>
                <a-form-model-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="备注"
                >
                  <a-textarea placeholder="请输入备注" v-model="model.memo" />
                </a-form-model-item>
              </a-form-model>
              <div class="anty-form-btn">
                <a-button
                  @click="emptyCurrForm"
                  type="default"
                  htmlType="button"
                  icon="sync"
                  >重置</a-button
                >
                <a-button
                  @click="submitCurrForm"
                  type="primary"
                  htmlType="button"
                  icon="form"
                  >保存</a-button
                >
              </div>
            </a-card>
            <a-card v-else>
              <a-empty>
                <span slot="description">请先选择一个部门!</span>
              </a-empty>
            </a-card>
          </a-tab-pane>
          <a-tab-pane tab="部门权限" key="2" forceRender>
            <depart-auth-modal ref="departAuth" />
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-col>

    <depart-modal ref="departModal" @ok="loadTree"></depart-modal>
  </a-row>
</template>
<script>
import DepartModal from "./Department/DepartModal";
import {
  queryDepartTreeList,
  searchByKeywords,
  deleteByDepartId,
} from "@/api/api";
import { httpAction, deleteAction } from "@/api/manage";
import { ListMixin } from "@/mixins/ListMixin";
import DepartAuthModal from "./Department/DepartAuthModal";
import Vue from "vue";
// 表头
const columns = [
  {
    title: "机构名称",
    dataIndex: "departName",
  },
  {
    title: "机构类型",
    align: "center",
    dataIndex: "orgType",
  },
  {
    title: "机构编码",
    dataIndex: "orgCode",
  },
  {
    title: "手机号",
    dataIndex: "mobile",
  },
  {
    title: "传真",
    dataIndex: "fax",
  },
  {
    title: "地址",
    dataIndex: "address",
  },
  {
    title: "排序",
    align: "center",
    dataIndex: "departOrder",
  },
  {
    title: "操作",
    align: "center",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
  },
];
export default {
  name: "DepartList",
  mixins: [ListMixin],
  components: {
    DepartAuthModal,
    DepartModal,
  },
  data() {
    return {
      rightcolval: 0,
      iExpandedKeys: [],
      loading: false,
      autoExpandParent: true,
      currFlowId: "",
      currFlowName: "",
      disable: true,
      treeData: [],
      visible: false,
      departTree: [],
      rightClickSelectedKey: "",
      rightClickSelectedOrgCode: "",
      hiding: true,
      model: {},
      dropTrigger: "",
      depart: {},
      columns: columns,
      disableSubmit: false,
      checkedKeys: [],
      selectedKeys: [],
      autoIncr: 1,
      currSelected: {},
      allTreeKeys: [],
      checkStrictly: true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      graphDatasource: {
        nodes: [],
        edges: [],
      },
      validatorRules: {
        departName: [{ required: true, message: "请输入机构/部门名称!" }],
        orgCode: [{ required: true, message: "请输入机构编码!" }],
        orgCategory: [{ required: true, message: "请输入机构类型!" }],
        //   mobile: Vue.prototype.rules.mobile2
        mobile: "",
      },
      url: {
        delete: "/sys/sysDepart/delete",
        edit: "/sys/sysDepart/edit",
        deleteBatch: "/sys/sysDepart/deleteBatch",
        exportXlsUrl: "sys/sysDepart/exportXls",
        importExcelUrl: "sys/sysDepart/importExcel",
      },
      orgCategoryDisabled: false,
      oldDirectorUserIds: "",
    };
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG["domianURL"]}/${this.url.importExcelUrl}`;
    },
    leftColMd() {
      return this.rightcolval == 0 ? 24 : 12;
    },
    rightColMd() {
      return this.rightcolval == 0 ? 0 : 12;
    },
  },
  methods: {
    loadData() {
      this.refresh();
    },
    loadTree() {
      var that = this;
      that.treeData = [];
      that.departTree = [];
      queryDepartTreeList().then((res) => {
        if (res.success) {
          //部门全选后，再添加部门，选中数量增多
          this.allTreeKeys = [];
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i];
            that.treeData.push(temp);
            that.departTree.push(temp);
            that.setThisExpandedKeys(temp);
            that.getAllKeys(temp);
            // //   console.log(temp.id)
          }
          this.loading = false;
        }
      });
    },
    setThisExpandedKeys(node) {
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key);
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a]);
        }
      }
    },
    refresh() {
      this.loading = true;
      this.loadTree();
    },
    // 右键操作方法
    rightHandle(node) {
      this.dropTrigger = "contextmenu";
      // //   console.log(node.node.eventKey);
      this.rightClickSelectedKey = node.node.eventKey;
      this.rightClickSelectedOrgCode = node.node.dataRef.orgCode;
    },
    onExpand(expandedKeys) {
      // //   console.log("onExpand", expandedKeys);
      this.iExpandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    backFlowList() {
      this.$router.back(-1);
    },
    // 右键点击下拉框改变事件
    dropStatus(visible) {
      if (visible == false) {
        this.dropTrigger = "";
      }
    },
    // 右键下拉关闭下拉框
    closeDrop() {
      this.dropTrigger = "";
    },
    addRootNode() {
      this.$refs.nodeModal.add(this.currFlowId, "");
    },
    batchDel: function () {
      // //   console.log(this.checkedKeys);
      if (this.checkedKeys.length <= 0) {
        this.$message.warning("请选择一条记录！");
      } else {
        var ids = "";
        for (var a = 0; a < this.checkedKeys.length; a++) {
          ids += this.checkedKeys[a] + ",";
        }
        var that = this;
        this.$confirm({
          title: "确认删除",
          content:
            "确定要删除所选中的 " +
            this.checkedKeys.length +
            " 条数据，以及子节点数据吗?",
          onOk: function () {
            deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.loadTree();
                that.onClearSelected();
              } else {
                that.$message.warning(res.message);
              }
            });
          },
        });
      }
    },
    onSearch(value) {
      let that = this;
      if (value) {
        searchByKeywords({ keyWord: value }).then((res) => {
          if (res.success) {
            that.departTree = [];
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i];
              that.departTree.push(temp);
            }
          } else {
            that.$message.warning(res.message);
          }
        });
      } else {
        that.loadTree();
      }
    },
    nodeModalOk() {
      this.loadTree();
    },
    nodeModalClose() {},
    hide() {
      this.visible = false;
    },
    hideRightColMd() {
      this.rightcolval = 0;
    },
    onCheck(checkedKeys, info) {
      //   console.log("onCheck", checkedKeys, info);
      this.hiding = false;
      //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
      if (this.checkStrictly) {
        this.checkedKeys = checkedKeys.checked;
      } else {
        this.checkedKeys = checkedKeys;
      }
      //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
    },
    onSelect(selectedKeys, e) {
      this.rightcolval = 1;
      //   console.log("selected", selectedKeys, e);
      this.hiding = false;
      let record = e.node.dataRef;
      //   console.log("onSelect-record", record);
      this.currSelected = Object.assign({}, record);
      this.model = this.currSelected;
      this.selectedKeys = [record.key];
      this.model.parentId = record.parentId;

      this.setValuesToForm(record);
      this.$refs.departAuth.show(record.id);
      this.oldDirectorUserIds = record.directorUserIds;

      //update-beign-author:taoyan date:20220316 for: VUEN-329【bug】为什么不是失去焦点的时候，触发手机号校验
      this.$nextTick(() => {
        this.$refs.form.validateField("mobile");
      });
      //update-end-author:taoyan date:20220316 for: VUEN-329【bug】为什么不是失去焦点的时候，触发手机号校验
    },
    // 触发onSelect事件时,为部门树右侧的form表单赋值
    setValuesToForm(record) {
      if (record.orgCategory == "1") {
        this.orgCategoryDisabled = true;
      } else {
        this.orgCategoryDisabled = false;
      }
    },
    getCurrSelectedTitle() {
      return !this.currSelected.title ? "" : this.currSelected.title;
    },
    onClearSelected() {
      this.hiding = true;
      this.checkedKeys = [];
      this.currSelected = {};
      this.selectedKeys = [];
      this.$refs.departAuth.departId = "";
    },
    handleNodeTypeChange(val) {
      this.currSelected.nodeType = val;
    },
    notifyTriggerTypeChange(value) {
      this.currSelected.notifyTriggerType = value;
    },
    receiptTriggerTypeChange(value) {
      this.currSelected.receiptTriggerType = value;
    },
    submitCurrForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.currSelected.id) {
            this.$message.warning("请点击选择要修改部门!");
            return;
          }

          //update-begin---author:wangshuai ---date:20200308  for：[JTC-119]在部门管理菜单下设置部门负责人
          this.currSelected.oldDirectorUserIds = this.oldDirectorUserIds;
          //update-end---author:wangshuai ---date:20200308  for：[JTC-119]在部门管理菜单下设置部门负责人

          httpAction(this.url.edit, this.currSelected, "put").then((res) => {
            if (res.success) {
              this.$message.success("保存成功!");
              this.loadTree();
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    },
    emptyCurrForm() {
      this.$refs.form.resetFields();
      this.model = {};
    },
    nodeSettingFormSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          //   console.log("Received values of form: ", this.model);
        }
      });
    },
    openSelect() {
      this.$refs.sysDirectiveModal.show();
    },
    handleAdd(num) {
      if (num == 1) {
        this.$refs.departModal.add();
        this.$refs.departModal.title = "新增";
      } else if (num == 2) {
        let key = this.currSelected.key;
        if (!key) {
          this.$message.warning("请先点击选中上级部门！");
          return false;
        }
        this.$refs.departModal.add(this.selectedKeys);
        this.$refs.departModal.title = "新增";
      } else {
        this.$refs.departModal.add(this.rightClickSelectedKey);
        this.$refs.departModal.title = "新增";
      }
    },
    handleDelete() {
      var that = this;
      this.$confirm({
        title: "确认删除",
        content: "确定要删除此部门以及子节点数据吗?",
        onOk: function () {
          deleteByDepartId({ id: that.rightClickSelectedKey }).then((resp) => {
            if (resp.success) {
              //删除成功后，去除已选中中的数据
              that.checkedKeys.splice(
                that.checkedKeys.findIndex(
                  (key) => key === that.rightClickSelectedKey
                ),
                1
              );
              that.$message.success("删除成功!");
              that.loadTree();
              //删除后同步清空右侧基本信息内容
              let orgCode = that.model.orgCode;
              if (orgCode && orgCode === that.rightClickSelectedOrgCode) {
                that.onClearSelected();
              }
            } else {
              that.$message.warning("删除失败!");
            }
          });
        },
      });
    },
    selectDirectiveOk(record) {
      //   console.log("选中指令数据", record);
      this.nodeSettingForm.setFieldsValue({
        directiveCode: record.directiveCode,
      });
      this.currSelected.sysCode = record.sysCode;
    },
    getFlowGraphData(node) {
      this.graphDatasource.nodes.push({
        id: node.id,
        text: node.flowNodeName,
      });
      if (node.children.length > 0) {
        for (let a = 0; a < node.children.length; a++) {
          let temp = node.children[a];
          this.graphDatasource.edges.push({
            source: node.id,
            target: temp.id,
          });
          this.getFlowGraphData(temp);
        }
      }
    },
    //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
    expandAll() {
      this.iExpandedKeys = this.allTreeKeys;
    },
    closeAll() {
      this.iExpandedKeys = [];
    },
    checkALL() {
      this.checkStriccheckStrictlytly = false;
      this.checkedKeys = this.allTreeKeys;
    },
    cancelCheckALL() {
      //this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = [];
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false;
      } else if (v == 2) {
        this.checkStrictly = true;
      }
    },
    getAllKeys(node) {
      // //   console.log('node',node);
      this.allTreeKeys.push(node.key);
      if (node.children && node.children.length > 0) {
        for (let a = 0; a < node.children.length; a++) {
          this.getAllKeys(node.children[a]);
        }
      }
    },
    //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
  },
  created() {
    this.currFlowId = this.$route.params.id;
    this.currFlowName = this.$route.params.name;
    // this.loadTree()
  },
};
</script>
<style  lang="scss" scoped>
@import "@/assets/css/despartment.scss";
.department .ant-form-item-control {
  text-align: left;
}
.bor_radius {
  .tab_box {
    background: #fff;
    border-radius: 5px;
  }
}
</style>